<template>
  <div class="home-container">
    <!-- 头部 -->
    <div class="header">
      <div class="bg-img">
        <!-- 导航栏 -->
        <div class="nav clearFix">
          <div class="grid-item">
            <i class="iconfont icon-choujiang"></i>
            <span>抽奖</span>
          </div>

          <van-field class="search-field">
            <i slot="left-icon" class="iconfont icon-sousuo"></i>
            <i slot="right-icon" class="iconfont icon-yuyin"></i>
          </van-field>

          <div class="grid-item">
            <i class="iconfont icon-banben"></i>
            <span>版本</span>
          </div>
          <div class="grid-item">
            <i class="iconfont icon-kefu"></i>
            <span>客服</span>
          </div>
          <div class="grid-item">
            <i class="iconfont icon-xiaoxi"></i>
            <span>消息</span>
          </div>
        </div>
        <!-- 四大功能：我的账号、转账、明细查询、扫一扫 -->
        <div class="foour-function">
          <div class="item">
            <img src="@/assets/myAccount.jpg" />
            <span>我的账户</span>
          </div>
          <div class="item">
            <img src="@/assets/transfer.jpg" />
            <span>转账</span>
          </div>
          <div class="item">
            <img src="@/assets/detailQuery.jpg" />
            <span>明细查询</span>
          </div>
          <div class="item">
            <img src="@/assets/scan.jpg" />
            <span>扫一扫</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体 -->
    <div class="main">
      <!-- 四大列表 -->
      <div class="grid-list">
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-xinyongqia"></use>
            </svg>
            <span slot="text">信用卡</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-cunkuan"></use>
            </svg>
            <span slot="text">存款</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouzhi"></use>
            </svg>
            <span slot="text">收支</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-daikuan"></use>
            </svg>
            <span slot="text">贷款</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-shenghuojiaofei"></use>
            </svg>
            <span slot="text">生活缴费</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-jijin"></use>
            </svg>
            <span slot="text">基金</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-nonghangkuaiebao"></use>
            </svg>
            <span slot="text">农行快e宝</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-licaichanpin"></use>
            </svg>
            <span slot="text">理财产品</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-chengshizhuanqu"></use>
            </svg>
            <span slot="text">城市专区</span>
          </van-grid-item>

          <van-grid-item>
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanbu"></use>
            </svg>
            <span slot="text">全部</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 分割线 -->
      <div class="divider"></div>
      <!-- 新闻 -->
      <div class="news">
        <span class="toutiao">头条</span>
        <a class="article" href="##">中国农业银行服务价格标准（2022）</a>
      </div>
      <!-- 汇率 -->
      <div class="exchange-rate">
        <div class="left">
          <span class="key">美元(USD)</span>
          <span class="value">718.03</span>
        </div>
        <div class="vertical-divider"></div>
        <div class="right">
          <span class="key">黄金(AU)</span>
          <span class="value">405.12</span>
        </div>
      </div>
      <!-- 轮播图 -->
      <van-swipe
        @change="bannerChange"
        :autoplay="10000"
        class="banner"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <van-image fit="cover" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图指示器 -->
      <div class="indicators">
        <i v-for="(item, index) in images" :key="index"></i>
      </div>
      <!-- 金融小秘书 -->
      <div class="secretary">
        <div class="inner-container">
          <div class="left">
            <div class="top">
              <h2 class="title">金融小秘书</h2>
              <img
                class="redmind-img"
                src="@/assets/intelligent-remind.jpg"
                alt=""
              />
            </div>
            <div class="bottom">
              <span><a href="##">缴费提醒</a></span>
              <span>|</span>
              <span><a href="##">还款提醒</a></span>
              <span>|</span>
              <span><a href="##">个人提醒</a></span>
            </div>
          </div>
          <div class="right">
            <div class="setting-btn">去设置</div>
          </div>
        </div>
      </div>
      <!-- 薪资管家标题 -->
      <div class="finance-steward-title common-title">
        <span class="left">薪资管家</span>
        <span class="right">></span>
      </div>
      <!-- 薪资管家 -->
      <div class="finance-steward">
        <div class="top">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </div>
        <div class="bottom">
          <van-grid>
            <van-grid-item text="电子工资单">
              <span slot="icon">
                <img src="@/assets/gongzidan.jpg" />
              </span>
            </van-grid-item>
            <van-grid-item text="智慧党建">
              <span slot="icon">
                <img src="@/assets/danghui.jpg" />
              </span>
            </van-grid-item>
            <van-grid-item text="社保服务">
              <span slot="icon">
                <img src="@/assets/shebaofuwu.jpg" />
              </span>
            </van-grid-item>
            <van-grid-item text="企业年金">
              <span slot="icon">
                <img src="@/assets/qiyenianjin.jpg" />
              </span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 财富精选标题 -->
      <div class="wealth-selection-title">财富精选</div>
      <!-- 财富精选 -->
      <div class="wealth-selection">
        <div class="wealth-item">1</div>
        <div class="wealth-item">2</div>
        <div class="wealth-item">3</div>
      </div>
      <!-- 优选基金标题 -->
      <div class="preferred-fund-title common-title">
        <span class="left">优选基金</span>
        <span class="right">></span>
      </div>
      <!-- 优选基金 -->
      <div class="preferred-fund">
        <div class="fund-item">
          <div class="rank">
            <img src="@/assets/No1.jpg" />
          </div>
          <div class="content">
            <div class="percent-container">
              <div class="top">
                <span class="percent">12.56</span>
                <i class="per">%</i>
              </div>
              <div class="bottom">近一年增长率</div>
            </div>
            <div class="title-container">
              <div class="top">广发睿毅领先混合啊</div>
              <div class="bottom">逆向价值 挖掘低估值潜力</div>
            </div>
          </div>
        </div>
        <div class="fund-item">
          <div class="rank">
            <img src="@/assets/No2.jpg" />
          </div>
          <div class="content">
            <div class="percent-container">
              <div class="top">
                <span class="percent">3.34</span>
                <i class="per">%</i>
              </div>
              <div class="bottom">近一年增长率</div>
            </div>
            <div class="title-container">
              <div class="top">安信稳健增值混合A</div>
              <div class="bottom">股债匠心搭配 稳行致远</div>
            </div>
          </div>
        </div>
        <div class="fund-item">
          <div class="rank">
            <img src="@/assets/No3.jpg" />
          </div>
          <div class="content last">
            <div class="percent-container">
              <div class="top">
                <span class="percent">2.32</span>
                <i class="per">%</i>
              </div>
              <div class="bottom">近一年增长率</div>
            </div>
            <div class="title-container">
              <div class="top">农行金汇债券</div>
              <div class="bottom">短债策略 闲钱理财好选择</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 附近网点标题 -->
      <div class="nearby-bank-title common-title">
        <span class="left"
          >附近网点
          <i class="refresh">
            <svg slot="icon" class="icon" aria-hidden="true">
              <use xlink:href="#icon-shuaxin"></use>
            </svg> </i
        ></span>
        <span class="right">></span>
      </div>
      <!-- 附近网点 -->
      <div class="nearby-bank">
        <div class="address">
          <div class="left">
            <div class="title-container">
              <i class="iconfont icon-nonghangkuaiebao"></i>
              <span class="title">上海遵义路支行</span>
            </div>
            <div class="distance-container">
              <svg slot="icon" class="icon" aria-hidden="true">
                <use xlink:href="#icon-daohang"></use>
              </svg>
              <span class="title">距您约266米</span>
            </div>
            <div class="position-container">
              <i class="iconfont icon-weizhi"></i>
              <span class="title">上海遵义路404-406号</span>
            </div>
          </div>
          <div class="right">
            <div class="status">未营业</div>
            <div class="address-img">
              <img src="@/assets/address-img.jpg" />
            </div>
          </div>
        </div>
        <div class="action">
          <div class="phone">电话</div>
          <div class="getNumber">取号</div>
        </div>
      </div>
      <!-- 热门活动标题 -->
      <div class="popular-activities-title common-title">
        <span class="left">热门活动</span>
        <span class="right">></span>
      </div>
      <!-- 热门活动 -->
      <div class="popular-activities"></div>
      <!-- 乡村集市标题 -->
      <div class="countryside-market-title common-title">
        <span class="left">乡村集市</span>
        <span class="right">></span>
      </div>
      <!-- 乡村集市 -->
      <div class="countryside-market"></div>
      <!-- 资讯标题 -->
      <div class="information-title common-title">
        <span class="left">资讯</span>
        <span class="right">></span>
      </div>
      <!-- 资讯 -->
      <div class="information">
        <informationItemVue
          :information-list="informationList"
        ></informationItemVue>
      </div>
      <!-- 上划查看更多 -->
      <div class="more">
        <p>上滑查看更多理财信息</p>
        <div class="circle-container">
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
      </div>
      <!-- 回到最顶点 -->
      <div class="toTop" @click="topTop">
        <i class="iconfont icon-xiangshangzhiding"></i>
      </div>
    </div>
  </div>
</template>

<script>
import informationItemVue from "./components/information-item.vue";

export default {
  name: "HomeIndex",
  components: { informationItemVue },
  props: {},
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
      ],
      informationList: [
        {
          title: "杨德龙:扩内需促消费利好消费白马股",
          date: "2022-12-16",
          img: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          title: "农行内蒙古分行数字赋能畜牧业高质量发展啊啊啊啊啊啊啊啊",
          date: "2022-12-16",
          img: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          title: "农业农村部部署今冬明春应对拉尼娜科学抗灾减损稳",
          date: "2022-12-16",
          img: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          title: "温彬:美联储加息50bps符合预期,再加息75bps概",
          date: "2022-12-16",
          img: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          title: "杨德龙:扩内需促消费利好消费白马股",
          date: "2022-12-16",
          img: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
      ],
    };
  },
  created() {
    // 监听滚动条从而动态改变 nav
    this.listenScrollChange();
  },
  mounted() {
    // 触发轮播图第一次切换
    this.bannerChange(0);
    // 监听向上置顶
    this.listenClickToTop();
  },
  methods: {
    listenScrollChange() {
      window.addEventListener("scroll", () => {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(scrollTop)
        if (scrollTop > 0 && scrollTop <= 800) {
          // 将nnav背景颜色改变
          document.getElementsByClassName("nav")[0].style.backgroundColor =
            "white";
          document.getElementsByClassName("nav")[0].style.color = "black";

          document.getElementsByClassName(
            "search-field"
          )[0].style.backgroundColor = "#f5f5f5";
          // 改变搜索框内字体颜色
          document.getElementsByClassName("van-field__control")[0].style.color =
            "#a3a3a3";
        } else {
          document.getElementsByClassName("nav")[0].style.backgroundColor =
            "unset";
          document.getElementsByClassName("nav")[0].style.color = "white";
          document.getElementsByClassName(
            "search-field"
          )[0].style.backgroundColor = "transparent";
          // 改变搜索框内字体颜色
          document.getElementsByClassName("van-field__control")[0].style.color =
            "#fff";
        }
      });
    },
    // 监听轮播图切换
    bannerChange(index) {
      var banners = document.querySelectorAll(".indicators i");
      banners.forEach((item) => {
        item.style.width = "5px";
        item.style.backgroundColor = "#e8e8e8";
      });
      banners[index].style.width = "10px";
      banners[index].style.backgroundColor = "#ababab";
    },
    // 监听向上置顶
    listenClickToTop() {
      window.addEventListener("scroll", () => {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 0 && scrollTop <= 800) {
          document.getElementsByClassName("toTop")[0].style.display = "none";
        } else {
          document.getElementsByClassName("toTop")[0].style.display = "block";
        }
      });
    },
    topTop() {
      document.documentElement.scrollTop = 0;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
/* 公共标题样式 */
.common-title {
  width: 90%;
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    font-size: 20px;
    font-weight: 700;
  }
  .right {
    color: #929292;
    font-size: 18px;
    font-weight: 700;
  }
}
.clearFix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.header {
  height: 280px;
  .bg-img {
    position: relative;
    height: 200px;
    background-image: url("@/assets/test.jpg");
    background-size: 100% 100%;
  }
  /* 导航栏 */
  :deep(.nav) {
    z-index: 2;
    width: 100%;
    position: fixed;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    /* 搜索框 */
    .search-field {
      color: inherit;
      align-items: center;
      background-color: transparent;
      width: 150px;
      height: 30px;
      padding: unset;
      border-radius: 50px;
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px #fff, -1px -1px 2px #dcdcdc;

      .van-field__value {
        color: inherit;
      }

      .icon-sousuo {
        font-size: 14px;
        margin-left: 8px;
        margin-right: 8px;
        color: inherit;
      }

      .van-field__control {
        color: #fff;
      }

      .van-field__right-icon {
        color: inherit;
        .icon-yuyin {
          color: inherit;
          margin-right: 8px;
        }
      }
    }

    .grid-item {
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        font-size: 15px;
      }
    }
  }

  /* 四大功能 */
  :deep(.foour-function) {
    z-index: 1;
    border: 1px solid #f4f4f4;
    box-shadow: 0 5px 10px #f1f1f1;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -65px;
    width: 90%;
    height: 115px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      color: #000;
      font-weight: 700;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      img {
        width: 40px;
      }
    }
  }
}

.main {
  padding-bottom: 50px;
  box-sizing: border-box;
  position: relative;

  :deep(.grid-list) {
    .van-grid-item {
      height: 80px;
      .van-grid-item__content {
        flex-direction: column;
        justify-content: space-between;
        padding: unset;
        height: 50px;

        svg {
          font-size: 17px;
        }
        span {
          font-weight: 600;
        }
      }
    }
  }
  // 分割线
  .divider {
    width: 90%;
    height: 1px;
    background-color: #e8e8e8;
    margin: 0 auto 10px;
  }
  // 轮播图
  .news {
    width: 90%;
    height: 50px;
    margin: 0 auto;
    // background-color: aquamarine;
    display: flex;
    align-items: center;

    .toutiao {
      font-size: 17px;
      font-weight: 700;
      font-style: italic;
      margin-right: 10px;
    }
    .article {
      font-size: 15px;
    }
  }
  // 汇率
  .exchange-rate {
    width: 90%;
    height: 60px;
    margin: 5px auto 0px;
    border: 1px solid #f6f6f6;
    border-radius: 15px;
    box-shadow: 0px 0px 7px 5px #f0f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .vertical-divider {
      width: 1px;
      height: 20px;
      background-color: #cdcdcd;
    }
    .key {
      color: #9a7c53;
      font-size: 16px;
      font-weight: 600;
      margin-right: 8px;
    }
    .value {
      font-weight: 600;
    }
    .right {
      margin-right: 30px;
    }
  }
  // 轮播图
  .banner {
    width: 90%;
    margin: 0 auto;
    height: 110px;
    border-radius: 15px;
    margin-top: 30px;
  }
  // 指示器
  .indicators {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 10px;

    i {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background-color: #e8e8e8;
      margin-right: 10px;
    }
  }
  // 金融小秘书
  .secretary {
    border-radius: 15px;
    width: 90%;
    height: 110px;
    margin: 20px auto 0;
    box-shadow: 0px 0px 7px 5px #f0f0f0;
    .inner-container {
      width: 90%;
      margin: 0 auto;
      height: 100%;
      display: flex;
      justify-content: space-around;
      .left {
        flex: 8;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .top {
          height: 22px;

          .title {
            font-size: 22px;
            font-weight: 700;
            display: inline-block;
            margin-right: 5px;
          }
          .redmind-img {
            vertical-align: bottom;
            width: 80px;
          }
        }

        .bottom {
          color: #686868;
          a {
            color: #686868;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        width: 60px;
        .setting-btn {
          font-size: 16px;
          color: #fff;
          width: 100%;
          line-height: 28px;
          border-radius: 20px;
          text-align: center;
          background: linear-gradient(to right, #fec551, #ffaf10);
          box-shadow: 0 5px 7px #ffde90;
        }
      }
    }
  }
  // 薪资管家
  :deep(.finance-steward) {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0px 0px 5px 5px #f0f0f0;
    width: 90%;
    height: 160px;
    margin: 20px auto 0;
    .top {
      height: 50%;
      width: 100%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .bottom {
      .van-grid-item__content::after {
        border: unset;
      }

      .van-grid-item__icon-wrapper {
        margin-bottom: 10px;
        img {
          width: 25px;
        }
      }
    }
  }
  // 财富精选标题
  .wealth-selection-title {
    width: 90%;
    margin: 20px auto 0;
    font-weight: 700;
    font-size: 20px;
  }
  // 财富精选
  .wealth-selection {
    border-radius: 15px;
    margin: 20px 0 0 18.7px;
    height: 110px;
    box-shadow: 0px 0px 7px 5px #f0f0f0;
    display: flex;
    overflow: hidden;

    .wealth-item {
      height: 100%;
      line-height: 110px;
      min-width: 220px;
      background-color: #9a7c53;
      text-align: center;
    }
  }
  // 优选基金
  .preferred-fund {
    border-radius: 15px;
    box-shadow: 0px 0px 5px 5px #f0f0f0;
    width: 90%;
    height: 250px;
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    padding: 15px 0px;
    box-sizing: border-box;
    .fund-item {
      width: 100%;
      height: 33.33%;
      display: flex;

      .rank {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 40px;
          height: 29px;
        }
      }
      .content {
        flex: 8;
        display: flex;
        align-items: center;
        height: 100%;
        border-bottom: 1px solid #ebebeb;
        .percent-container {
          flex: 3;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          .top {
            color: #e14646;
            font-size: 22px;
            .percent {
              margin-right: 3px;
              font-weight: 600;
            }
            .per {
              font-size: 16px;
            }
          }
          .bottom {
            margin-top: 5px;
            font-size: 12px;
            color: #9b9b9b;
          }
        }

        .title-container {
          display: flex;
          flex: 6;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 0;
          .top {
            width: 80%;
            font-size: 18px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .bottom {
            margin-top: 5px;
            font-size: 12px;
            color: #9b9b9b;
            position: relative;
            top: 2px;
          }
        }
      }
      .last {
        border: unset;
      }
    }
  }
  // 附近网点标题
  .nearby-bank-title .left {
    display: flex;
    align-items: center;
    .icon {
      font-size: 8px;
      font-weight: 600;
      margin-left: 8px;
    }
  }
  // 附近网点
  .nearby-bank {
    border-radius: 15px;
    box-shadow: 0px 0px 5px 5px #f0f0f0;
    width: 90%;
    height: 170px;
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .address {
      flex: 7;
      display: flex;
      .left {
        flex: 6;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .iconfont {
          font-size: 16px;
          margin-right: 5px;
        }
        .title-container {
          .iconfont {
            color: #118b77;
          }
        }
        .distance-container {
          svg {
            font-size: 9px;
            margin-right: 5px;
          }
          .title {
            color: #f7bd6e;
          }
        }
        .position-container {
          color: #c6c6c6;
        }
      }
      .right {
        flex: 4;
        position: relative;
        .status {
          width: 50px;
          height: 23px;
          line-height: 23px;
          text-align: center;
          background-color: #fff;
          border: 1.5px solid #c7c7c7;
          color: #a2a2a2;
          position: absolute;
          left: -10px;
        }
        .address-img {
          height: 100%;
          text-align: right;
          img {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 70px;
          }
        }
      }
    }
    .action {
      flex: 3;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .phone {
        width: 60px;
        height: 25px;
        line-height: 25px;
        font-weight: 600;
        border-radius: 35px;
        text-align: center;
        color: #f6bb20;
        border: 1px solid #e1ba5c;
      }
      .getNumber {
        width: 60px;
        height: 25px;
        line-height: 25px;
        font-weight: 600;
        border-radius: 35px;
        text-align: center;
        color: #fff8d7;
        border: 1px solid #e1ba5c;
        background: linear-gradient(#fdc858, #feb00b);
      }
    }
  }
  // 热门活动
  // 乡村集市
  .countryside-market {
    border-radius: 15px;
    border: 1px solid #f0f0f0;
    width: 90%;
    height: 100px;
    margin: 20px auto 0;
    background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  }
  // 资讯
  .information {
    width: 90%;
    margin: 20px auto 0;
  }
  // 上划查看更多
  .more {
    height: 80px;
    p {
      margin-top: 35px;
      text-align: center;
      color: #969696;
    }
    .circle-container {
      color: #00b894;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    }
    .circle {
      background-color: #00b894;
      margin-bottom: 3px;
    }
    .circle:nth-child(1) {
      width: 2px;
      height: 2px;
      border-radius: 2px;
    }
    .circle:nth-child(2) {
      width: 3px;
      height: 3px;
      border-radius: 3px;
    }
    .circle:nth-child(3) {
      width: 5px;
      height: 5px;
      border-radius: 5px;
    }
  }
  // 回到最顶点
  .toTop {
    position: fixed;
    right: 25px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    background-color: #707070;
    color: white;
    display: none;

    .icon-xiangshangzhiding {
      font-size: 30px;
    }
  }
}
</style>
